
import React, { Component } from 'react'
import { getlist, add } from '../api/data'
import './index.css'
export class App extends Component {
  state = {
    data: [],
    curindex: ""

  }
  componentDidMount() {
    console.log(getlist(Math.random() * 50), "  getlist(Math.random() * 50)")
    getlist(Math.random() * 50).then(res => {
      this.setState(() => {
        return {
          data: res
        }
      })

    })
  }
  getdata = (b) => {

    this.setState(() => {
      return {
        curindex: b
      }
    })

  }
  render() {
    return (
      <div className="App">
        {this.state.curindex}

        <App1 data={this.state.data} getdata={this.getdata} />
        

      </div>
    )
  }
}

export default App


export class App1 extends Component {
  render() {
  
    return (
      <div className="app1">
        <App2 a={this.props.data} btn={this.props.getdata}></App2>

      </div >
    )
  }
}

export class App2 extends Component {
  state = {
    a: 0
  }
  getD = (b, a) => {
    this.setState(() => {
      return {
        a: b
      }
    })
  }

  render() {
    console.log(this)
    const { a } = this.state
    return (
      <div className="app2">
       
       <App3 a={this.props.a} btn={this.props.btn}></App3>
      </div>
    )
  }
}


export class App3 extends Component {
  state = {
    a: 0
  }
  getD = (b, a) => {
    this.setState(() => {
      return {
        a: b
      }
    })
  }

  render() {
    console.log(this)
    const { a } = this.state
    return (
      <div className="app3">
        {
          this.props.a.map((i, b) => {
            return <div className={b === a ? 'ac' : 'sc'} onClick={() => {
              this.getD(b, a)
              this.props.btn(b)
            }}>
              {i}
            </div>
          })
        }

      </div>
    )
  }
}




